// var zoom = d3.zoom().on("zoom", 0.1);
var svg = d3.select("svg"),
    inner = d3.select("svg g"),
    // zoom = d3.behavior.zoom().on("zoom", function() {
    // });
    // zooming = "translate(20,0) scale(0.08)"
    
    zoom = d3.zoom().on("zoom", function() {
      // inner.attr("transform", zooming);
      // console.log()
      // d3.event.transform
      inner.attr("transform", d3.event.transform);
    });

// zoom.scale(0.1);
svg.call(zoom);

// Create and configure the renderer

var render = dagreD3.render();
var g;

function highlight_code(id){
  if(document.getElementById(id) != null){
      hljs.highlightBlock(document.getElementById(id));
  }
  console.log("show-code")

}

function tryDraw(text) {
    try {
      g = graphlibDot.read(text);
    } catch (e) {
      // inputGraph.setAttribute("class", "error");
      console.log(e)
      throw e;
    }

    // Save link to new graph
    // graphLink.attr("href", graphToURL());

    // Set margins, if not present
    if (!g.graph().hasOwnProperty("marginx") &&
        !g.graph().hasOwnProperty("marginy")) {
      g.graph().marginx = 20;
      g.graph().marginy = 20;
    }
    // graph = g.graph()
    

    g.edges().forEach(function (q){
        console.log(q)
        at = g.edge(q.v, q.w);
        at['curve'] = d3.curveBasis
        g.setEdge(q.v, q.w, at);
    })

    g.graph().transition = function(selection) {
      return selection.transition().duration(10);
    };

    // Render the graph into svg g
    console.log("render")
    console.log(g)
    d3.select("svg g").call(render, g);
    inner.selectAll("g.node")
      .attr("title", function(v) {
        return '<pre><code id="show-code" class="python hljs">' + g.node(v).code + '</code></pre>';
      })
      .each(function(v) { 
        $(this).tipsy({ gravity: "w", opacity: 1, position:"fixed", html: true }); 

      });
    
    d3.select("svg g").attr("transform", "translate(20,0) scale(0.08)");
    

  // }
}

document.arrive("#show-code", () => highlight_code("show-code"));